<template>
  <view class="pet-detail-container">
    <view class="pet-card">
      <view class="pet-image-container">
        <image class="pet-image" :src="pet.image" mode="aspectFill"></image>
      </view>
      <view class="pet-name-container">
        <text class="pet-name">{{ pet.name }}</text>
        <view class="edit-icon" @click="editPet">
          <u-icon name="edit-pen" color="#ff6b00" size="20"></u-icon>
        </view>
      </view>
    </view>
    
    <view class="info-list">
      <view class="info-item">
        <text class="info-label">宠物类型</text>
        <text class="info-value">{{ pet.type }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">性别</text>
        <text class="info-value">{{ pet.gender }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">年龄</text>
        <text class="info-value">{{ pet.age }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">出生日期</text>
        <text class="info-value">{{ pet.birthDate || '未设置' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">体重</text>
        <text class="info-value">{{ pet.weight }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">宠物品种</text>
        <text class="info-value">{{ pet.breed }}</text>
      </view>
    </view>
    
    <view class="action-buttons">
      <view class="action-btn service-btn" @click="bookService">
        <u-icon name="calendar" size="20"></u-icon>
        <text>预约服务</text>
      </view>
    </view>
  </view>
</template>

<script>
// 页面配置
export default {
  navigationBarTitleText: '宠物详情',
  navigationBarBackgroundColor: '#0c3441',
  navigationBarTextStyle: 'white'
}
</script>

<script setup>
import { ref } from 'vue';
import modal from '@/plugins/modal';
import { onLoad } from '@dcloudio/uni-app';

// 宠物信息
const pet = ref({
  id: 0,
  name: '',
  type: '',
  breed: '',
  gender: '',
  age: '',
  weight: '',
  color: '',
  birthDate: '',
  image: '',
  healthRecords: []
});

// 模拟宠物数据
const petData = [
  {
    id: 1,
    name: '宠物昵称',
    type: '猫',
    breed: '长毛',
    gender: '公',
    age: '02',
    weight: '2.5公斤',
    color: '橘色',
    birthDate: '21/02/2023',
    image: '/static/images/pet/cat.png',
    healthRecords: [
      {
        date: '2024-07-15',
        title: '年度体检',
        description: '各项指标正常，建议定期驱虫'
      },
      {
        date: '2024-06-01',
        title: '疫苗接种',
        description: '完成三联疫苗接种'
      }
    ]
  },
  {
    id: 2,
    name: '豆豆',
    type: '狗',
    breed: '金毛',
    gender: '公',
    age: '01',
    weight: '1.8公斤',
    color: '金黄色',
    birthDate: '15/05/2023',
    image: '/static/images/pet/dog.png',
    healthRecords: [
      {
        date: '2024-08-01',
        title: '驱虫',
        description: '内外驱虫已完成'
      },
      {
        date: '2024-05-10',
        title: '疫苗接种',
        description: '完成狂犬疫苗接种'
      }
    ]
  }
];

// 在页面加载时获取参数
onLoad((options) => {
  // 获取路由参数中的宠物ID
  const petId = parseInt(options.id || '1');
  
  // 根据ID获取宠物信息
  const petInfo = petData.find(item => item.id === petId);
  if (petInfo) {
    pet.value = petInfo;
  } else {
    modal.msgError('未找到宠物信息');
    setTimeout(() => {
      uni.navigateBack({
        delta: 1
      });
    }, 1500);
  }
});

// 编辑宠物信息
function editPet() {
  uni.navigateTo({
    url: `/pages/pet/edit-pet?id=${pet.value.id}`
  });
}

// 预约服务
function bookService() {
  uni.navigateTo({
    url: `/pages/pet/book-service?petId=${pet.value.id}&petName=${pet.value.name}`
  });
}
</script>

<style lang="scss">
page {
  background-color: #f8f8f8;
}

.pet-detail-container {
  padding-bottom: 120rpx;
  
  .pet-card {
    background-color: #ffffff;
    border-radius: 20rpx;
    margin: 30rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
    
    .pet-image-container {
      display: flex;
      justify-content: center;
      margin-bottom: 20rpx;
      
      .pet-image {
        width: 300rpx;
        height: 300rpx;
        border-radius: 10rpx;
      }
    }
    
    .pet-name-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .pet-name {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }
      
      .edit-icon {
        width: 60rpx;
        height: 60rpx;
        background-color: #fff8f2;
        border-radius: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  
  .info-list {
    background-color: #ffffff;
    border-radius: 20rpx;
    margin: 0 30rpx 30rpx;
    padding: 20rpx 0;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
    
    .info-item {
      display: flex;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 1px solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .info-label {
        font-size: 28rpx;
        color: #666;
      }
      
      .info-value {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
    }
  }
  
  .action-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    padding: 20rpx 30rpx;
    background-color: #ffffff;
    box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
    
    .action-btn {
      flex: 1;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 40rpx;
      font-size: 28rpx;
      
      .u-icon {
        margin-right: 10rpx;
      }
      
      &.service-btn {
        background-color: #ff6b00;
        color: #ffffff;
      }
    }
  }
}
</style>